<template lang="">
  <div>
    <a-typography-title :level="5">{{ $t('touZ-4') }}</a-typography-title>
    <div style="margin-bottom: 10px">
      <a-radio-group v-model:value="paiLotte">
        <a-radio-button value="1">{{ $t('quan-4') }}</a-radio-button>
        <a-radio-button value="2">{{ $t('yiPa') }}</a-radio-button>
        <a-radio-button value="3">{{ $t('weiP') }}</a-radio-button>
        <a-radio-button value="4">{{ $t('shiB-0') }}</a-radio-button>
        <a-radio-button value="5">{{ $t('quXi') }}</a-radio-button>
      </a-radio-group>
    </div>
    <a-table :columns="columns" :data-source="data" bordered>
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a href="javascript:;">{{ text }}</a>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const paiLotte = ref<string>('1');
const columns = [
  {
    title: t('youX-7'),
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: t('quDa'),
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: t('biSh'),
    dataIndex: 'address',
    key: t('addre'),
    ellipsis: true,
  },
  {
    title: t('touZ-5'),
    dataIndex: 'address',
    key: t('addre-0'),
    ellipsis: true,
  },
  {
    title: t('youX-8'),
    dataIndex: 'address',
    key: t('addre-3'),
    ellipsis: true,
  },
  {
    title: t('shuY'),
    dataIndex: 'address',
    key: t('addre-3'),
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: t('john'),
    age: 32,
    address: t('newY'),
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: t('jimG'),
    age: 42,
    address: t('londo'),
    tags: ['loser'],
  },
  {
    key: '3',
    name: t('joeB'),
    age: 32,
    address: t('sidne'),
    tags: ['cool', 'teacher'],
  },
];
</script>
<style lang="">
  
</style>